<template>
  <el-dialog title="考勤详情" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false" :before-close="close">
    <el-form ref="RefForm" :model="formData" label-width="90px" status-icon>
      <div class="divForm">
        <el-form-item label="考勤方式">
          <el-input v-model="formData.attendanceType" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="RFID卡号">
          <el-input v-model="formData.rfid" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="门禁ID">
          <el-input v-model="formData.accessCardID" :disabled="true"></el-input>
        </el-form-item>
      </div>
      <div class="divForm">
        <el-form-item label="员工姓名">
          <el-input v-model="formData.name" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item v-if="formData.department" label="部门">
          <el-input v-model="formData.department.deptName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item v-if="formData.job" label="职位">
          <el-input v-model="formData.job.jobTitle" :disabled="true"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <ListTable ref="RefDetailsTableList" :page="true" :loading="tableLoading" :table-data="tableData" :table-col="tableCol"></ListTable>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import listMixin from '@/mixins/list'
  import { parseTime } from '@/utils'
  export default {
    mixins: [dialogEditMixin, listMixin],
    data() {
      return {
        // 列表标头字段
        tableCol: [
          { type: 'index', label: '序号' },
          {
            prop: 'enterTime', label: '进场时间',
            formatter(row, col, cell) {
              return row.enterTime ? parseTime(new Date(row.enterTime).getTime()) : '————'
            },
          },
          { prop: 'enterDeice', label: '进场读卡设备' },
          {
            prop: 'leaveTime', label: '出场时间',
            formatter(row, col, cell) {
              return row.leaveTime ? parseTime(new Date(row.leaveTime).getTime()) : '————'
            },
          },
          { prop: 'leaveDevice', label: '出场读卡设备' },
          {
            label: '工时',
            formatter(row, col, cell) {
              if (!row.enterTime && !row.leaveTime) { return '缺少进场时间和出场时间' }
              if (!row.enterTime) { return '缺少进场时间' }
              if (!row.leaveTime) { return '缺少出场时间' }
              let date1 = new Date(row.enterTime)  //开始时间
              let date2 = new Date(row.leaveTime)    //结束时间
              let date3 = date2.getTime() - new Date(date1).getTime()   //时间差的毫秒数    

              //计算出相差天数
              let days = Math.floor(date3 / (24 * 3600 * 1000))

              //计算出小时数
              let leave1 = date3 % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
              let hours = Math.floor(leave1 / (3600 * 1000))

              //计算相差分钟数
              let leave2 = leave1 % (3600 * 1000)        //计算小时数后剩余的毫秒数
              let minutes = Math.floor(leave2 / (60 * 1000))

              return (days ? days + "天 " : '') + hours + "小时 " + minutes + "分钟"
            },
          }
        ],
        options: [],
        tableData: [],
        apiKey: {
          search: '/Attendance/Detail/',
          add: '/Job',
          put: '/Job/'
        }
      }
    },
    watch: {
      searchValue: function (newValue, oldValue) {
        if (!newValue.data) { return }
        this.formData = {
          attendanceType: newValue.attendanceType == 1 ? '门禁' : newValue.attendanceType == 2 ? '基站' : '门禁 + 基站',
          rfid: newValue.data.rfid,
          accessCardID: newValue.data.accessCardID,
          name: newValue.data.name,
          department: {
            deptName: newValue.data.department ? newValue.data.department.deptName : '无'
          },
          job: {
            jobTitle: newValue.data.job ? newValue.data.job.jobTitle : '无'
          }
        }
        this.tableData = newValue.locations
      }
    },
    methods: {
      resetFormData() {
        this.formData = {
          attendanceType: "",
          rfid: '',
          accessCardID: '',
          name: "",
          department: {
            deptName: ""
          },
          job: {
            jobTitle: ""
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .divForm {
    display: flex;
  }
</style>
